<template>
  <div class="box">
    <h3 class="title">
      登 录
    </h3>
    <van-form @submit="onSubmit" class="form">
      <van-field
        v-model.trim="ip"
        name="ip"
        label="服务器地址"
        placeholder="例如：http://123.26.48.77:8083"
        :rules="[{ required: true, message: '请填写服务器地址' }]"
      />
      <van-field
        v-model.trim="username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model.trim="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;width: 50%">
        <van-button round block type="info" native-type="submit">
          登 录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, Field, Button } from 'vant'

Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
export default {
  data () {
    return {
      ip: '',
      username: '',
      password: ''
    }
  },
  mounted () {
    const baseURL = localStorage.getItem('baseURL')
    if (baseURL) {
      this.ip = baseURL
    }
  },
  methods: {
    onSubmit () {
      var formdata = new FormData()
      formdata.append('username', this.username)
      formdata.append('password', this.password)
      var requestOptions = {
        method: 'POST',
        body: formdata,
        redirect: 'follow'
      }
      fetch(this.ip + '/login', requestOptions)
        .then(response => response.json())
        .then(res => {
          if (res.Code === 200) {
            this.$Notify({ type: 'success', message: '登录成功！' })
            // localStorage.setItem('baseURL', 'http://123.206.78.77:8081')
            localStorage.setItem('baseURL', this.ip)
            const user = { username: this.username, token: res.Data, baseURL: this.ip }
            localStorage.setItem('user', JSON.stringify(user))
            localStorage.setItem('token', res.Data)
            localStorage.setItem('userList', JSON.stringify([user]))
            setTimeout(() => {
              this.$router.history.push('/Hmoe')
            }, 500)
          } else {
            this.$Notify({ type: 'danger', message: res.Msg || '网络不畅，请稍候重试！' })
          }
        })
        .catch(error => {
          this.$Notify({ type: 'danger', message: error || '网络不畅，请稍候重试！' })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  width: 95%;
  height: vw(500);
  position: absolute;
  top: 0;
  bottom: vw(100);
  left: 0;
  right: 0;
  margin: auto;
  // margin-top: 32%;
  // transform: translateY(30%);
  .title{
    text-align: center;
    font-size: vw(40);
    margin-bottom: vw(70);
    img{
      width: vw(60);
      height: vw(60);
      margin-right: vw(10);
    }
  }
  .form{
    height: vw(500);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
